<template>
  <view >
   
      <yewu></yewu>
     <!-- <view v-if="kw.length>0">
        <yewu></yewu>
      </view>
     
        <view class="history-box" v-else>
            
            <view class="history-title">
                <text>搜索历史</text>
                <uni-icons type="trash" size="25" @click="clearHistotry"></uni-icons>
            </view>
           
            <view class="history-list">
                <uni-tag :text="item" v-for="(item,i) in histories" :key="i" @click="gotoDetail(item)"></uni-tag>
            </view>
        </view> -->
    
    
    
    
  </view>
</template>

<script>
  import Lines from '../../components/common/Lines.vue'
   import yewu from '../../components/index/yewu.vue'
  export default {
    components:{
        
        yewu
    },
    data() {
      return {
        keyword:"",
        //搜索过的词
        searchData:[]
      }
    },
 
    //页面加载的时候
    onLoad(e){
      console.log(e)
      uni.getStorage({
        key:"searchData",
        success: (res) => {
          console.log(res)
          this.searchData = JSON.parse( res.data )
        }
      })
      
    },
    
   
    //监听input输入内容
    onNavigationBarSearchInputChanged(e) {
        console.log(e);
        this.keyword = e.text
    },
    //点击顶栏中的搜索按钮
    onNavigationBarButtonTap(e) {
      this.search();
    },
    //监听软键盘的搜索按钮点击的
    onNavigationBarSearchInputConfirmed() {
       this.search();
    },
    components:{
      Lines
    },
    
    methods: {
      //判断关键词是否为空和跳转页面的
      search(){
        if(this.keyword === ""){
          return uni.showToast({
            title:"关键词不能为空",
            icon:"none"
          })
        }else{
          this.toSearchList(this.keyword)
          // uni.navigateTo({
          //   url:"../search-list/search-list?keyword="+this.keyword+""         
          // })
        }
        uni.hideKeyboard();
        this.addSearch();
      },
      //记录最近搜索词
      addSearch(){
        let idx = this.searchData.indexOf(this.keyword)
        if(idx<0){
           this.searchData.unshift( this.keyword )
        }else{
          this.searchData.unshift(this.searchData.splice(idx,1)[0])
        }
       
        uni.setStorage({
          key:"searchData",
          data:JSON.stringify(this.searchData)
        })
      },
      //清除搜索记录
      clearHistotry(){
        uni.showModal({
          title:"重要提示",
          content:"是否要清除搜索记录",
          cancelText:"取消",
          confirmText:"确定",
          success: (res) => {
            // console.log(res);
            if(res.confirm){
              uni.removeStorage({
                key:"searchData"
              })
              this.searchData=[];
            }
          }
        })
      },
      //点击搜索记录进入页面
      toSearchList(item){
        uni.navigateTo({
          
          url:"../search-list/search-list?keyword="+this.keyword+""
        })
      },
      onTap(e){
        console.log(e)
      }
      
      

    }
  }
</script>

<style scoped>

.searchBox{
   display: flex;
}
.searchBox-item{
  background-color: #F7F7F7;
  display: flex;
  border-radius: 20px;
  width: 600rpx;
  margin-left: 60rpx;
  height: 70rpx;
  margin-bottom: 10rpx;
}
.icon{
  margin: 15rpx 0;
}
.text{
  margin-top: 15rpx;
}


.search-item{
  padding: 20rpx;
}
.search-title{
  display: flex;
  justify-content: space-between;
}
.search-name{
  padding: 4rpx 24rpx;
  background-color: #e1e1e1;
  display: inline-block;
  border-radius: 26rpx;
  margin: 10rpx;
}

.search-end{
  text-align: center;
}

</style>
